<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .row{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86,61,124,.15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86,61,124,.8);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
</div>
<div class="row">
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4">col-md-4</div>
</div>
<div class="row">
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4">col-md-4</div>
</div>
<div class="row">
    <div class="col-md-4">
        轻轻的我走了，</br>
        正如我轻轻的来；</br>
        我轻轻的招手，</br>
        作别西天的云彩。</br>
        那河畔的金柳，</br>
        是夕阳中的新娘；</br>
        波光里的艳影，</br>
        在我的心头荡漾。</br>
    </div>
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4">col-md-4</div>
</div>
<div class="row">
    <div class="col-md-4 col-md-offset-2">col-md-4</div>
    <div class="col-md-4">col-md-4</div>
<h4>原来的顺序</h4>
<div>
    <div class="col-md-8 grid green">col-md-8</div>
    <div class="col-md-4 grid pink">col-md-4</div>
</div>
    <h4>排序后的顺序</h4>
    <div>
        <div class="col-md-8 col-md-push-4 grid green">col-md-8</div>
        <div class="col-md-4 col-md-pull-8 grid pink">col-md-4</div>
    </div>
    <h4>列嵌套</h4>
    <div class="row">
        <div class="col-md-9"> Level 1: col-md-9
            <div class="row">
                <div class="col-md-6"> Level 2: col-md-6 </div>
               <div class="col-md-6"> Level 2: col-md-6 </div>
            </div>
            <div class="row">
                <div class="col-md-3"> Level 3: col-md-3 </div>
                <div class="col-md-6"> Level 3: col-md-6 </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>